<template>
  <Col span="24">
    <Row>
     <div class="add-header">
       <span slot="title" style="width:100px">添加活动配置</span>
     </div>
    </Row>
    <Row>
      <Form :model="activity" :label-width="80">
      <div style="width:95%" >
        <div style="padding: 5px 0; color: #ccc"></div>
        <FormItem label="活动标题:">
          <Input v-model="activity.title" placeholder="请填写活动标题"></Input>
        </FormItem>
        <FormItem label="活动内容:">
          <div class="toolbar" id="div1">
          </div>
          <div style="padding: 5px 0; color: #ccc"></div>
          <div ref="editor" class="text" style="height: 600px;" id="editor"> <!--可使用 min-height 实现编辑区域自动增加高度-->
          </div>
        </FormItem>
        <FormItem label="状态:">
            <RadioGroup v-model="activity.status" v-for="(status,idx) in this.$store.state.statusOptions.commons" :key="idx">
              <Radio :label="status.value"><span v-text="status.text"></span></Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="权重:">
          <Input v-model="activity.weight" placeholder="请填写权重"></Input>
        </FormItem>
        <Row>
          <FormItem label="活动时间:">
            <Col span="6">
              <DatePicker type="datetime" v-model="activity.start_time" show-week-numbers placeholder="开始时间" style="width: 200px"></DatePicker>
            </Col>
            <Col span="12">
              <DatePicker type="datetime" show-week-numbers v-model="activity.end_time" placement="bottom-end" placeholder="结束时间" style="width: 200px"></DatePicker>
            </Col>
          </FormItem>
        </Row>
        <div class="add-button">
          <Button type="primary" @click="add()">立即提交</Button>
          <Button type="ghost" style="margin-left: 15px" @click="reload()">重置</Button>
        </div>
      </div>
      </Form>
    </Row>
  </Col>
</template>

<script>
  import E from 'wangeditor'
  import control from '@/models/mobilecontrol/index'

  export default {
    components: {
    },
    data () {
      return {
        activity: {
          content: '请输入内容',
          status: null,
          title: '',
          weight: '',
          start_time: '',
          end_time: ''
        }
      }
    },
    mounted () {
      let _self = this
      var editor = new E('#div1', this.$refs.editor)
      editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
      ]
      editor.customConfig.onchange = function (html) {
        // html 即变化之后的内容
        _self.activity.content = html
      }
      editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
      editor.customConfig.uploadImgServer = '/upload/image'  // 上传图片到服务器
        // 关闭粘贴样式的过滤
      editor.customConfig.pasteFilterStyle = false
      // 忽略粘贴内容中的图片
      editor.customConfig.pasteIgnoreImg = true
      // 自定义字体
      editor.customConfig.fontNames = [
        '宋体',
        '微软雅黑',
        'Arial',
        'Tahoma',
        'Verdana'
      ]
      // 将图片大小限制为 3M
      editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
      editor.customConfig.uploadImgParams = {
        // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
        // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
      }
      editor.customConfig.uploadFileName = 'file'
      editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
          // 图片上传之前触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

          // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          // return {
          //     prevent: true,
          //     msg: '放弃上传'
          // }
        },
        success: function (xhr, editor, result) {
          // 图片上传并返回结果，图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
          // 图片上传并返回结果，但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
          // 图片上传出错时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
          // 图片上传超时时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          var url = result.url
          insertImg(url)
          // result 必须是一个 JSON 格式字符串！！！否则报错
        }
      }
      editor.create()
      editor.txt.html(_self.activity.content)
    },
    methods: {
      add () {
        control.add(this.activity).then(r => {
          if (r.code === 200) {
            this.$Message.success({
              content: r.msg,
              duration: 5,
              closable: true
            })
            this.$router.push('/mobilecontrol/activity/index')
          } else {
            this.loading = false
            this.$Message.warning({
              content: r.msg,
              duration: 5,
              closable: true
            })
          }
        }).catch(r => {
          this.loading = false
          this.$Message.error({
            content: r.msg,
            duration: 5,
            closable: true
          })
        })
      },
      reload () {
        this.activity = {
          content: '请输入内容',
          status: null,
          title: '',
          weight: '',
          start_time: '',
          end_time: ''
        }
      }
    }
  }
</script>

<style>
  .toolbar {
    border: 1px solid #ccc;
  }
  .text {
    border: 1px solid #ccc;
    height: 400px;
  }
  .add-header{background-color:rgba(172, 172, 172, 0.38);height:40px;line-height:40px;}
  .add-button{position:relative;left:150px;width:50%;margin:0 auto;bottom:10px;}
</style>